import * as React from 'react';
import { forwardRef } from 'react';
import StatusBar from '../status-bar/status-bar';
import TitleHeader from '../title-header/title-header';
import FirePrediction from '../fire-prediction/fire-prediction';
import ThirdPartyInspection from '../third-party-inspection/third-party-inspection';
import './index.scss';

export interface PredictionDataProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 组件ID
   */
  componentId?: string;
  /**
   * 第一个状态栏配置
   */
  firstStatusBar?: {
    chineseText?: string;
    englishText?: string;
    theme?: 'dark' | 'light';
  };
  /**
   * 标题配置
   */
  titleHeader?: {
    title?: string;
  };
  /**
   * 火灾预测配置
   */
  firePrediction?: {
    width?: number;
    height?: number;
    noResponsiveScale?: boolean;
  };
  /**
   * 第二个状态栏配置
   */
  secondStatusBar?: {
    chineseText?: string;
    englishText?: string;
    theme?: 'dark' | 'light';
  };
  /**
   * 第一个第三方巡查配置
   */
  firstThirdPartyInspection?: {
    width?: number;
    height?: number;
    inspectionItems?: any[];
  };
  /**
   * 第三个状态栏配置
   */
  thirdStatusBar?: {
    chineseText?: string;
    englishText?: string;
    theme?: 'dark' | 'light';
  };
  /**
   * 第二个第三方巡查配置
   */
  secondThirdPartyInspection?: {
    width?: number;
    height?: number;
    inspectionItems?: any[];
  };

  __designMode?: boolean;
}

const PredictionData = forwardRef<HTMLDivElement, PredictionDataProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  componentId,
  firstStatusBar = {},
  titleHeader = {},
  firePrediction = {},
  secondStatusBar = {},
  firstThirdPartyInspection = {},
  thirdStatusBar = {},
  secondThirdPartyInspection = {},

  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `prediction-data ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref} 
      className={finalClassName} 
      style={customStyle}
      id={componentId}
      {...otherProps}
    >
                                  {/* 第一个状态栏 */}
       <div className="prediction-data__status-bar-1">
         <StatusBar
           chineseText={firstStatusBar.chineseText || "预测数据"}
           englishText={firstStatusBar.englishText || "PREDICTION DATA"}
           theme={firstStatusBar.theme || 'dark'}
         />
       </div>

       {/* 标题组件和火灾预测组件的容器 */}
       <div className="prediction-data__content-container">
         {/* 标题组件 */}
         <div className="prediction-data__title-header">
           <TitleHeader
             title={titleHeader.title || "数据预测分析"}
             noResponsiveScale={noResponsiveScale}
           />
         </div>

         {/* 火灾预测组件 */}
         <div className="prediction-data__fire-prediction">
           <FirePrediction
             width={500}
             height={102}
             noResponsiveScale={noResponsiveScale}
             {...firePrediction}
           />
         </div>
       </div>

       {/* 第二个状态栏 */}
       <div className="prediction-data__status-bar-2">
         <StatusBar
           chineseText={secondStatusBar.chineseText || "日常检查"}
           englishText={secondStatusBar.englishText || "DAILY INSPECTION"}
           theme={secondStatusBar.theme || 'dark'}
         />
       </div>

               {/* 第一个第三方巡查组件 */}
        <div className="prediction-data__third-party-inspection-1">
          <ThirdPartyInspection
            width={500}
            height={280}
            showData={false}
            tableHeaders={[
              { key: 'inspectionDate', value: '巡查日', width: '20' },
              { key: 'inspectionName', value: '巡查名称', width: '25' },
              { key: 'executor', value: '执行人', width: '20' },
              { key: 'targetLocation', value: '巡查目标点位', width: '20' },
              { key: 'completionStatus', value: '完成情况', width: '15' }
            ]}
            
            records={[
              {
                id: '1',
                inspectionDate: '2025-07-01',
                inspectionName: '浙江区域服务商',
                executor: '洪芳平',
                targetLocation: 'A座',
                completionStatus: '未完成'
              },
              {
                id: '2',
                inspectionDate: '2025-07-02',
                inspectionName: '皇饿吗',
                executor: '洪芳平',
                targetLocation: 'A座',
                completionStatus: '已完成'
              },
              {
                id: '3',
                inspectionDate: '2025-07-03',
                inspectionName: '橘子娱乐',
                executor: '洪芳平',
                targetLocation: 'A座',
                completionStatus: '已完成'
              },
              {
                id: '4',
                inspectionDate: '2025-07-04',
                inspectionName: '华阳文化',
                executor: '洪芳平',
                targetLocation: 'A座',
                completionStatus: '已完成'
              },
              {
                id: '5',
                inspectionDate: '2025-07-05',
                inspectionName: '杭州语邻信息…',
                executor: '洪芳平',
                targetLocation: 'A座',
                completionStatus: '未完成'
              }
            ]}
                         headerTextColor="#FFFFFF"
             recordTextColor="#FFFFFF"
             incompleteStatusColor="#FFA500" // 设置未完成状态字体颜色为橙色
             theme="dark"
             inspectionItems={firstThirdPartyInspection.inspectionItems || []}
            {...firstThirdPartyInspection}
          />
        </div>

       {/* 第三个状态栏 */}
       <div className="prediction-data__status-bar-3">
         <StatusBar
           chineseText={thirdStatusBar.chineseText || "数据分析"}
           englishText={thirdStatusBar.englishText || "DATA ANALYSIS"}
           theme={thirdStatusBar.theme || 'dark'}
         />
       </div>

       {/* 第二个第三方巡查组件 */}
       <div className="prediction-data__third-party-inspection-2">
         <ThirdPartyInspection
           width={500}
           height={434}
           showData={true}
           inspectionItems={secondThirdPartyInspection.inspectionItems || []}
           {...secondThirdPartyInspection}
         />
       </div>
    </div>
  );
});

export default PredictionData; 